<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/xcx/xc.css">
  <link rel="stylesheet" href="../css/swiper-bundle.css">
  <script src="../js/swiper-bundle.js"></script>
</head>

<body>
  <div class="xc-box">
    <div class="index__header">
      <div class="index__header__logo">
        <img src="/image/loge.png" alt="" srcset="">
      </div>
      <div class="index__header__phone">
        <div class="index__header__phone__img">
          <img src="/image/phone.png" alt="" srcset="">
        </div>
        <div class="index__header__phone__text">
          咨询我们：12345678900
        </div>
      </div>
    </div>
    <!-- 导航 -->
    <div class="nav">
      <div class="nav1">
        <div class="nav__item"><a href="../index/index.html">首页</a></div>
        <div class="nav__item"><a href="../wzkf/wf.html">网站开发</a></div>
        <div class="nav__item"><a href="../rj/app.html">APP开发</a></div>
        <div class="nav__item"><a href="../xcx/xc.html">小程序开发</a></div>
        <div class="nav__item"><a href="../case/case.html">案例</a></div>
        <div class="nav__item"><a href="../about/about.html">关于我们</a></div>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../image/sw.png" alt="" srcset=""></div>
        <div class="swiper-slide"><img src="../image/sw.png" alt="" srcset=""></div>
        <div class="swiper-slide"><img src="../image/sw.png" alt="" srcset=""></div>
      </div>
    </div>
    <!-- 开发流程 -->
    <div class="kffl">
      <div class="kffl-title">开发流程</div>
      <div class="kffl-text">专业技术团队，打造小程序开发品牌</div>
      <div class="kffl-img">
        <img src="../image/kfl.png" alt="">
      </div>
    </div>
    <!-- 小程序制定 -->
    <div class="xcdz">
      <div class="xcdz-title">小程序制定</div>
      <div class="xcdz-text">专业技术团队，打造小程序开发品牌</div>
      <div class="xcdz-item">
        <div class="xcdz-item1">
          <div class="xcdz-item1-img">
            <img src="../image/百度智能小程序-夺冠魔方.png" alt="">
          </div>
          <div class="xcdz-item1-text">
            <div class="xc-title">百度小程序</div>
            <div class="xc-text">人与万物的开放生态，依托全域流量，通过百度AI开放式赋能，精准连接用户，无
              需下载安装便可享受指挥超前的使用体验</div>
          </div>
        </div>
        <div class="xcdz-item1">
          <div class="xcdz-item1-img">
            <img src="../image/微信小程序.png" alt="">
          </div>
          <div class="xcdz-item1-text">
            <div class="xc-title">微信小程序</div>
            <div class="xc-text">微信小程序是微信生态的优先选择，微
              信倾力打造的小程序体系，将是微信生
              态的未来主旋律。从现在抓住风口.</div>
          </div>
        </div>
        <div class="xcdz-item1">
          <div class="xcdz-item1-img">
            <img src="../image/支付宝小程序.png" alt="">
          </div>
          <div class="xcdz-item1-text">
            <div class="xc-title">支付宝小程序</div>
            <div class="xc-text">支付宝小程序是一种全新的开放模式，
              它运行在支付宝客户端，可以被便捷地
              获取和传播，为终端用户提供更优的用
              户体验。</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 程序类 -->
    <div class="cxl">
      <div class="cxl-title">程序类</div>
      <div class="cxl-text">专业技术团队，打造小程序开发品牌</div>
      <div class="container">
        <ul class="tabs">
          <li class="tab active" data-target="signContract">企业品牌</li>
          <li class="tab" data-target="productAnalysis">要闻资讯</li>
          <li class="tab" data-target="programCode">时尚服务</li>
        </ul>
        <div class="content active" id="signContract">
          <div class="cxl-item">
            <div class="cxl-item-left">
              <img src="../image/bj.png" alt="">
            </div>
            <div class="cxl-item-right">
              <div class="cxl-item-right-title">企业品牌</div>
              <div class="cxl-item-right-text">随着4G网络普及，各大小品牌都纷纷进驻移动互联网，而国内超过90%的推广公司都会通过移动端开发方式进行推广。手机网站就是能被随身携带和访问的微网站，能直接转发到微博和微信朋友圈，能直接在手机上观看并购买您的产品。</div>
            </div>
          </div>
        </div>
        <div class="content" id="productAnalysis">
          <div class="cxl-item">
            <div class="cxl-item-left">
              <img src="../image/bj.png" alt="">
            </div>
            <div class="cxl-item-right">
              <div class="cxl-item-right-title">要闻资讯</div>
              <div class="cxl-item-right-text">随着4G网络普及，各大小品牌都纷纷进驻移动互联网，而国内超过90%的推广公司都会通过移动端开发方式进行推广。手机网站就是能被随身携带和访问的微网站，能直接转发到微博和微信朋友圈，能直接在手机上观看并购买您的产品。</div>
            </div>
          </div>
        </div>
        <div class="content" id="programCode">
          <div class="cxl-item">
            <div class="cxl-item-left">
              <img src="../image/bj.png" alt="">
            </div>
            <div class="cxl-item-right">
              <div class="cxl-item-right-title">时尚服务</div>
              <div class="cxl-item-right-text">随着4G网络普及，各大小品牌都纷纷进驻移动互联网，而国内超过90%的推广公司都会通过移动端开发方式进行推广。手机网站就是能被随身携带和访问的微网站，能直接转发到微博和微信朋友圈，能直接在手机上观看并购买您的产品。</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <div class="footer-content">
        <div class="foot-top">
          <div class="foot-left">
            <div class="left1">山东柏瑞设计有限公司</div>
            <div class="left1">联系电话：12345678900</div>
            <div class="left1">地址：济南创新谷2号楼孵化器五楼（长清区海棠路与芙蓉路交叉路口东南）</div>
          </div>
          <div class="foot-right">
            <div class="foot-img">
              <img src="../image/二维码.png" alt="">
            </div>
            <div class="foot-font">微信公众号</div>
          </div>
        </div>
      </div>
      <div class="footer-bottom">
        Shandong Bairui Software Technology Co, Ltd. 山东柏瑞软件科技有限公司版权所有 鲁ICP备17006298号-1
      </div>
    </div>
  </div>
  <script>
    var mySwiper = new Swiper('.swiper', {

      autoplay: {
        delay: 2000,
      },
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    });
    const tabs = document.querySelectorAll('.tab');
    const contents = document.querySelectorAll('.content');

    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        tabs.forEach(t => t.classList.remove('active'));
        contents.forEach(c => c.classList.remove('active'));

        tab.classList.add('active');
        const targetContentId = tab.getAttribute('data-target');
        document.getElementById(targetContentId).classList.add('active');
      });
    });
  </script>
</body>

</html>